<template>
<div class="userinfo">
<div class="image">
<img src="/src/assets/game.png" class="image-h" v-if="mypath=='http://ooyevurbp.bkt.clouddn.com/null'">
<img v-bind:src="mypath" class="image-h" v-if="mypath!='http://ooyevurbp.bkt.clouddn.com/null'">
<el-form id="tf"  method="POST" enctype="multipart/form-data" action="http://localhost:8081/api/changeimage">

	<p><input type="hidden" name="uid" id="uid1"/></p>
	<p>请选择上传图片&nbsp;</p>
  <p><input type="file" name="file" accept="image/*" /></p>
  <p><el-button type="success" @click="upload()" value="">确定修改</el-button></p>
</el-form>
</div>
<div class="head">
<dl>
<dt class="a">用户名</dt>
<dt class="a">用户ID</dt>
<dt class="a">邮箱</dt>
<dt class="a">邮箱验证状态</dt>
<dt class="a">用户状态</dt>
<dt class="a">等级</dt>
<dt class="a">淘币</dt>
</dl>
</div>
<div class="body">
<dl>
<dt class="b">
{{this.$store.state.userinfo.username}}
<el-button type="primary" size="mini" @click="editinfo()">修改</el-button>
</dt>
<dt class="b">{{this.$store.state.userinfo.uid}}</dt>
<dt class="b">{{this.$store.state.userinfo.email}}</dt>
<dt class="b">{{this.$store.state.userinfo.emailstatus}}</dt>
<dt class="b">{{this.$store.state.userinfo.status}}</dt>
<dt class="b">{{this.$store.state.userinfo.exp}}</dt>
<dt class="b">{{this.$store.state.userinfo.gold}}</dt>
</dl>
</div>


</div>
</template>

<script>
import VueRouter from 'vue-router'
import axios from 'axios'
import store from './vuex/store'
import jQuery from 'jquery'

const myApi = axios.create({
  baseURL: 'http://localhost:8081/api',
  withCredentials: true,
  headers: {
    'Accept' : 'application/json',
    'Content-Type': 'application/json',
  }
});


  export default {
    data() {
      return {
        fileList: [],
        file: '',
        mypath:''
      };
    },
      computed: {
  },
    methods: {
      upload(){
      var thisVue = this;
              document.getElementById("uid1").value=this.$store.state.userinfo.uid;
              var form = new FormData(document.getElementById("tf"));
            jQuery.ajax({      
                url:"http://localhost:8081/api/changeimage",
                type:"post",
                data:form,
                processData:false,
                contentType:false,
                success:function(data){
                    console.log("over..");
                    console.log(data);
                    thisVue.$router.push('/userinfo');
                },
                error:function(e){
                    alert("发生错误");
                }
            });        
    },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      editinfo() {
        var thisVue = this;
        this.$prompt('请输入用户名', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          myApi.get('/edituserinfo', 
          { 
            params: { 
              uname: value, 
              email:  thisVue.$store.state.userinfo.email
              } 
          }).then(response => {
                    console.log(response);
                    thisVue.$router.push('/userinfo');
                    //console.log(111);
                    //window.location.href = "userpage.html"
                }, response => {
                    //erro callbac
                });
          this.$message({
            type: 'success',
            message: '修改成功 ' 
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
      }
    },
    created: function() {
        var thisVue = this;
        myApi.get('/userinfo')
                .then(function (response) {
                    console.log(response);
                    // this.data.uid = response.body.message.uid;
                    // this.data.username = response.body.message.username;
                    // this.data.email = response.body.message.email;
                    // this.data.emailstatus = response.body.message.emailstatus;
                    // this.data.status = response.body.message.status;
                    // this.data.exp = response.body.message.exp;
                    // this.data.gold = response.body.message.gold;
                    thisVue.mypath='http://ooyevurbp.bkt.clouddn.com/'+response.data.message.filepath;
                    thisVue.$store.dispatch('showuserinfo' , { 
                      'uid' : response.data.message.uid , 
                      'username' : response.data.message.username ,
                      'email' :response.data.message.email ,
                      'emailstatus' :response.data.message.emailstatus ,
                      'status' :response.data.message.status ,
                      'exp' :response.data.message.exp,
                      'gold' :response.data.message.gold
                      });
                })
                .catch(function (error) {
                    console.log(error);
                });
    }
  }
</script>

<style>
.userinfo{
    margin-top:30px;
    width: 800px;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
}
.image{
    height:200px;
    width:800px;
}
.image-h{
    height:200px;
    width:200px;
    float:left;
}
.uploadinfo{
    height:200px;
    width:400px;
    float:left
}
.uploadbt{
    
}
.head{
    float:left;
}
.body{
    float:left;
}
.a{
    border: #dfe6ec solid 1px;
    font-size: 16px;
    line-height: 40px;
    background-color: #eef1f6;
    height: 100px;
    width: 200px;
    padding-left: 18px;
    padding-right: 18px;
    color:#888;
}
.b{
    border: #dfe6ec solid 1px;
    font-size: 16px;
    line-height: 40px;
    background-color: #eef1f6;
    height: 100px;
    width: 400px;
    padding-left: 18px;
    padding-right: 18px;
    color:#888;
}
</style>